<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px" style="background-color: #409eff">
          <h1>商城管理系统</h1>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            active-text-color="#ffd04b"
            background-color="#409eff"
          >
            <router-link :to="{ name: 'User' }">
              <el-menu-item index="1">
                <el-icon><User /></el-icon>
                <span> 用户管理</span>
              </el-menu-item>
            </router-link>
            <router-link :to="{ name: 'Products' }">
              <el-menu-item index="2">
                <el-icon><Goods /></el-icon>
                <span> 商品管理</span>
              </el-menu-item>
            </router-link>
            <router-link :to="{ name: 'Order' }">
              <el-menu-item index="3">
                <el-icon><ShoppingCart /></el-icon>
                <span> 订单管理 </span>
              </el-menu-item>
            </router-link>
            <router-link :to="{ name: 'payOk' }">
              <el-menu-item index="4">
                <el-icon><ShoppingCart /></el-icon>
                <span> 已支付的订单 </span>
              </el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {
  ShoppingCart,
  Goods,
  User,
  ChatLineRound,
} from "@element-plus/icons-vue";
</script>
<style scoped>
a {
  color: black;
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
.el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
}
</style>
